<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.keyWord" clearable placeholder="名字/居住地址"></el-input>
				</el-form-item>
        <el-form-item>
					<el-button type="primary" v-on:click="search">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="success" @click="exportExcel">导出为Excel</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="drivers" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" width="55">
			</el-table-column>
      <!--设置模板-->
			<el-table-column prop="name" label="司机名" width="120" sortable>
			</el-table-column>
      <el-table-column prop="age" label="年龄" width="120" sortable>
      </el-table-column>
      <el-table-column prop="phone" label="联系电话" min-width="200" sortable>
      </el-table-column>
      <el-table-column prop="identity" label="身份证号" min-width="200" sortable>
      </el-table-column>
			<el-table-column prop="address" label="居住地址" width="160" sortable>
			</el-table-column>
			<el-table-column prop="license" label="驾照情况" width="160" sortable>
			</el-table-column>
			<el-table-column label="司机状态" width="160" sortable>
        <template scope="scope">
          <span v-if="scope.row.state==1 " style="color: red">已工作</span>
          <span v-else-if="scope.row.state==0 " style="color: green">等待工作</span>
          <span v-else style="color: yellow">未知</span>
        </template>
			</el-table-column>
      <el-table-column prop="email" label="邮箱" width="160" sortable>
      </el-table-column>
      <el-table-column label="身份证正面" min-width="120" sortable>
        <template slot-scope="scope">
          　　　　<img :src="api+scope.row.identityp" width="50" height="50" class="head_pic"/>
        </template>
      </el-table-column>
      <el-table-column label="身份证反面" min-width="120" sortable>
        <template slot-scope="scope">
          　　　　<img :src="api+scope.row.identityr" width="50" height="50" class="head_pic"/>
        </template>
      </el-table-column>

			<el-table-column label="操作" min-width="180">
				<template scope="scope" >
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
			<!--<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
			</el-pagination>-->
		<!--新分页条-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          style="float:right;">
      </el-pagination>

    </el-col>

		<!--编辑\添加界面-->
		<el-dialog :title="title" :visible.sync="editFormVisible" :close-on-click-modal="false">
			<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
				<el-form-item label="司机名" prop="name">
					<el-input v-model="editForm.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="年龄">
					<el-input v-model="editForm.age" auto-complete="off"></el-input>
				</el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="editForm.phone" auto-complete="off"></el-input>
        </el-form-item>
				<el-form-item label="司机状态：">
          <template>
            <el-radio v-model="editForm.state" label=-1 >未知</el-radio>
            <el-radio v-model="editForm.state" label=1>已工作</el-radio>
            <el-radio v-model="editForm.state" label=0>等待工作</el-radio>
          </template>
				</el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="editForm.identity" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="居住地址">
          <el-input v-model="editForm.address" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="驾照情况">
          <el-select v-model="editForm.license" clearable placeholder="请选择">
            <el-option
                v-for="item in catelist"
                :key="item"
                :label="item"
                :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="editForm.email" auto-complete="off"></el-input>
        </el-form-item>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

	</section>
</template>

<script>
	import util from '../../common/js/util'
	//import NProgress from 'nprogress'
	import { getDepartmentListPage, removeDepartment, batchRemoveDepartment, editDepartment, addDepartment } from '../../api/api';

	export default {
		data() {
			return {
			  api:"http://47.95.117.210:8888",
				filters: {
          keyWord: '',
          status:'',
          drivers_category:'',
				},
        options:['未知','已租','等待出租'],//给下拉框查询用的
        catelist:["A1","A2","A3","B1","B2","C1","C2","C3"],//用来装驾照状态的
				drivers: [],//装列表数据的
				total: 55,
        pageSizes:[5, 10, 15, 20],//分页的规则
        currentPage:1,//当前页
        pageSize:10,//每页显示条目个数
        title:"",
				listLoading: false,
				sels: [],//列表选中列
//新增和修改公用同一套
				editFormVisible: false,//编辑界面是否显示
				editLoading: false, //忙等框
				editFormRules: {
					name: [
						{ required: true, message: '请输入姓名', trigger: 'blur' }
					]
				},
				//编辑界面数据 准备一个对象用于给后台传递数据 和模型层里面的条条框框绑定
				editForm: {
          id:null,//id
          name: '',
          phone:'',
          state: '-1',
          license: '', //驾驶证状态
          identity:'', //身份证号
          address:'',
          age:'',
          email:'',
          identityp:'',
          identityr:''
				},
			}
		},
		methods: {

		  //九，导出
      exportExcel(){
          //发请请求进行导出 需要get请求
          location.href="http://localhost:8080/driver/export";
      },
		  //八、关键字查询
      search(){
        //查询还是交给查询全部去做，但是为了排除一个bug需要跳转到第一页
        this.currentPage=1;
        //然后调用查询方法
        this.getDrivers();
      },

		  //六、提交按钮执行添加
      editSubmit(){
        //1、在这里可以实现一个校验表单的过程
        this.$refs.editForm.validate((valid)=>{
          if(valid){
            //如果valid为true，就是说校验表单的东西都完成了
            //提示文案
            this.$confirm("确认提交吗？","温馨提示",{type:"warning"}).then(
                ()=>{
                  //2、开启忙等框
                  this.editLoading = true;
                  //3、获取到所有的数据
                  let para = Object.assign({}, this.editForm);
                  console.log(para)
                  //4、发送请求调用接口
                  this.$http.post("http://localhost:8080/driver/add",para).then(
                      result=>{
                        if(result.data.state){
                          this.$message({
                            message:'操作成功！！！',
                            type:'success'
                          })
                          //关闭忙等框
                          this.editLoading=false;
                          //刷新页面，且重新加载
                          location.reload();
                          this.getDrivers();
                        }else {
                          this.$message({
                            message:'添加失败，请重试',
                            type:'error'
                          })
                          //关闭忙等框
                          this.editLoading=false;
                        }
                      }
                  )
                }
            ).catch(
                ()=>{
                  console.log("取消提交")
                }
            )
          }
        })


      },
		  //五、批量删除
      batchRemove(){
        //在页面选择的时候，会将对象装到sels数组中，这里取出来，变成id数组
        var ids=this.sels.map(item=>item.id);
        console.log(ids)
        this.$confirm("是否删除选中的数据？","温馨提示",{type:"warning"}).then(
            ()=>{
              //带着数组调用接口，实现批量删除的功能
              this.$http.patch("http://localhost:8080/driver",ids).then(
                  result=>{
                    if(result.data.state){
                      this.$message({
                        message:'删除成功！',
                        type:'success'
                      })
                      //重新加载页面
                      this.getDrivers();
                    }else {
                      this.$message({
                        message:res.data.message,
                        type:'error'
                      })
                    }
                  }
              )
            }
        ).catch(
            result=>{
              console.log("取消删除操作");
            }
        )
      },
		  //四、删除单条的方法
      handleDel(index,row){
        this.$confirm("是否删除该数据？","温馨提示",{type:"warning"}).then(
            //再设置一个函数，成功了就执行
            ()=>{
              //获取到id
              let id=row.id;
              //发送axios请求
              this.$http.delete("http://localhost:8080/driver/"+id).then(
                  result=>{
                    //如果成功了，就打印信息并且重新加载页面
                    if(result.data.state){
                      this.$message({
                        message:'删除成功！',
                        type:'success'
                      })
                      //重新加载页面
                      this.getDrivers();
                    }else {
                      this.$message({
                        message:res.data.message,
                        type:'error'
                      })
                    }

                  }
              )
            }
        ).catch(
            result=>{
              console.log("取消删除操作");
            }
        )
      },
		  //三、页码发生改变
      handleCurrentChange(val){
        console.log(val)
        /*把新页码交给模型层的数据,页码发生改变，1，把页码赋值给当前页码，带着一页多少条一起去数据库查*/
        this.currentPage=val
        console.log("赋值后的当前页："+this.currentPage+"页总数："+this.pageSize)
        //2、调用getDrivers查询
        this.getDrivers()
      },
		  //二、页数发生改变
      handleSizeChange(val){
        /*分析，页数量发生改变，把数量赋值给模型层*/
        console.log(val)
        console.log("赋值后的当前页："+this.currentPage+"页总数："+this.pageSize)
        this.pageSize=val;
        //调用depart方法
        this.getDrivers();
      },
			//一、获取司机列表
			getDrivers() {
        console.log(this.filters.keyWord)
        //1、将需要查询的数值加到对象里面
        let para = {
          pageSize: this.pageSize,
          currentPage: this.currentPage,
          keyWord:this.filters.keyWord,
        };
				//2、简单写法，显示到列表
          this.$http.post("http://localhost:8080/driver/select",para).then(
              result=>{
                this.drivers=result.data.rows;
                this.total=result.data.total;
              }

          ).catch(
              result=>{
                console.log("查询失败，请刷新重试")
              }
          )



			},

			//显示编辑界面
			handleEdit: function (index, row) {
        //给title赋值
        this.title="编辑";
				this.editFormVisible = true;
				//把当前行的赋值给表单里面 克隆，不克隆有bug
				this.editForm = Object.assign({}, row);
			},
			//显示表单，进行添加
			handleAdd() {
        //给title赋值
        this.title="新增";
				this.editFormVisible = true;//新增页面打开表单
        //重置表单，如果不重置的话，会很麻烦
				this.editForm = {
          id:null,//id
          name: '',
          phone:'',
          state: '-1',
          license: '', //驾驶证状态
          identity:'', //身份证号
          address:'',
          age:'',
          email:'',
          identityp:'',
          identityr:''
				};
				console.log(this.editForm)
			},
			selsChange: function (sels) {
				this.sels = sels;
			},
		},
		mounted() {
			this.getDrivers();
			this.getProcess();
		}
	}

</script>

<style scoped>

</style>